
<script setup>
	import { ref } from "vue";
	import { groupMap } from "/global.js";
	import ListItem from "./ListItem.vue";
	
	var updateKey = ref(1);
	
</script>

<template>
	
	<view>
		<view class="list-head">
			<h1>群聊列表</h1>
			<view>
				<button class="button is-info" v-on:click="updateKey++">刷新列表</button>
			</view>
		</view>
		
		<ul class="list" :key="updateKey">
			
			<listItem
				v-for="(value, key) in groupMap"
				:key="value[0]"
				v-bind:avatar-content="value[1].avatarContent"
				v-bind:group-id="value[1].id"
				v-bind:group-name="value[1].name"
				v-bind:live-state="value[1].liveState"
			/>
			
		</ul>
	</view>
	
</template>



<style>
	.list-head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		margin-left: 5px;
	}
	
	h1 {
		font-size: xx-large;
	}
	
	button {
		transform: scale(0.8);
	}
</style>

